<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">网点评价</div>
                <div class="layui-card-body">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">网点编号</label>
                                <div class="layui-input-inline">
                                    <select name="wangdian" lay-verify="required" id="wangdian">
                                        <option value="">请选择标签</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">时间范围</label>
                                <div class="layui-input-block">
                                    <input type="text" name="date" lay-verify="required" style="width:120%"
                                           placeholder=""
                                           autocomplete="off" class="layui-input" id="date">
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-left: 50px">
                                <button class="layui-btn layuiadmin-btn-list" lay-submit
                                        lay-filter="LAY-app-contlist-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">时效变化范围</div>
            <div class="layui-card-body">
                <div id="mychart" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['form', 'laydate', 'echarts'],

        function () {
            var laydate = layui.laydate;
            var form = layui.form;
            //执行一个laydate实例
            laydate.render({
                elem: '#date' //指定元素
                , range: true
            });

            $.ajax({
                url: '/orgCodeList',
                async: false,
                type: "POST",
                success: function (data) {
                    data = $.parseJSON(data);
                    console.log(data.orgCodeList);
                    for (var i = 0; i < data.orgCodeList.length; i++) {
                        document.getElementById("wangdian").options.add(new Option(data.orgCodeList[i], data.orgCodeList[i]));
                    }
                    // render使select重新刷新，否则
                    form.render();
                }
            });

            var echarts = layui.echarts,
                option = {
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [],
                        type: 'line',
                        symbol: 'triangle',
                        symbolSize: 20,
                        lineStyle: {
                            color: 'green',
                            width: 4,
                            type: 'dashed'
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: 'yellow',
                            color: 'blue'
                        }
                    }]
                };

            mychart = echarts.init(document.getElementById('mychart'));
            mychart.setOption(option);

            form.on('submit(LAY-app-contlist-search)', function (data) {
                $.ajax({
                    url: '/get_evaluate?type=shixiao',
                    async: false,
                    type: "POST",
                    dataType: "text",
                    data: data.field,
                    success: function (data) {
                        data = $.parseJSON(data);
                        console.log(data);
                        console.log(data.res);
                        if (data.res.toString() !== 'fail') {
                            var value_list = [];
                            mychart.setOption({
                                // title: {
                                //     text: '业务量趋势图'
                                // },
                                tooltip: {},
                                xAxis: {
                                    type: 'category',
                                    data: data.date
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: data.Shixiao,
                                    type: 'line',
                                    symbol: 'triangle',
                                    symbolSize: 20,
                                    lineStyle: {
                                        color: 'green',
                                        width: 4,
                                        type: 'dashed'
                                    },
                                    itemStyle: {
                                        borderWidth: 3,
                                        borderColor: 'yellow',
                                        color: 'blue'
                                    }
                                }]
                            });
                        } else {
                            layer.open({
                                title: '查询失败'
                                , content: '未查询到相关记录！'
                            });
                        }
                    }
                })
            })
        }
    );
</script>
</body>
</html>